<template>
	<div class="jifen-mall">
		 <pubHead title="积分商城"></pubHead>
		 <div class="mall-top flex jus-c ali-c">
			 <div class="flexv ali-c">
				 <p class="p-1">可用积分</p>
				 <p class="p-2">{{user_score}}</p>
				 <div class="seeDetail" @click="toDetail">查看明细</div>
			 </div>
		 </div>
		 <div class="center flex ali-c">
			 <div class="center-l flex1 ali-c jus-c" @click="goRecord">
				 <img src="@/assets/_icon_exchangerecords@2x.png" />
				 <span>兑换记录</span>
			 </div>
			 <div class="center-r flex1 ali-c jus-c" @click="showGuize">
				 <img src="@/assets/_icon_rule@2x.png" />
				 <span>积分规则</span>
			 </div>
		 </div>
		 <!-- 积分商品 -->
		 <div class="jifen">
			 <div class="jifen-in">
				 <img src="@/assets/_title@2x.png" />
			 </div>
			 <van-list v-model="loading" :finished-text="finishedText" :finished="finished" @load="getIntegrals">
			 	<div class="goods_lists flex-wrap">
			 		<div class="goods-list flexv" @click="toGoodDetail(item)" v-for="(item,index) in hots" :key="index">
			 			<div class="goods-img flex">
			 				<img v-lazy="item.img[0]" :src="item.img[0]" class="goods_img" alt="">
			 			</div>
			 			<div class="goods-info flexv jus-b flex1">
			 				<p class="twoline title">{{item.title}}</p>
			 				<div class="goods-fix jus-b ali-c">
			 					<span class="ali-b price">{{parseFloat(item.integral)}}<span>积分</span></span>
			 				</div>
							<div class="goods-btn flex ali-c jus-c" @click.stop="exchange(item)">
								<span>立即兑换</span>
							</div>
			 			</div>
			 		</div>
			 	</div>
			 </van-list>
		 </div>
		 
		 <van-popup v-model="visibleGuize" position="center" closeable round>
			 <div v-html="guize" class="guize">
				 {{guize}}
			 </div>
		 </van-popup>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Toast,
		List,
		Swipe,
		SwipeItem,
		Popup,
		Dialog
	} from 'vant';
	import pubHead from '@/components/head.vue'
	import {
		getIntegral,
		getRule,
		getIntegralOrder
	} from '@/request/api';
	Vue.use(Toast,Swipe, SwipeItem, List,Popup,Dialog)
	export default{
		components: {
			 pubHead,
			"van-list": List,
			"van-swipe": Swipe,
			"van-swipe-item": SwipeItem,
		},
		data(){
			return {
				page: 0,
				pagesize: 10,
				hots: [], // 热卖
				finishedText: '没有更多内容喽',
				finished: false,
				loading: false,
				guize:'',
				visibleGuize:false,
				user_score:0
			}
		},
		methods: {
			// 获取当季热卖商品
			getIntegrals() {
				this.$loading()
				getIntegral({
					token: localStorage.getItem('token'),
					page: ++this.page,
					pagesize: this.pagesize
				}).then(res => {
					Toast.clear();
					if (res.code == 1) {
						this.user_score = res.data.user_score
						this.finished = Number(res.data.integral_list.length) >= Number(this.pagesize) ? false : true;
						if (res.data.integral_list.length > 0) {
							this.hots = [...this.hots, ...res.data.integral_list];
						}
					} else {
						this.$tip(res.msg)
					}
				})
			},
			showGuize(){
				this.visibleGuize = true
				this.$loading()
				getRule({
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						this.guize = res.data.info
					}
				})
			},
			toGoodDetail(item) {
				this.$router.push('/mallDetail?id=' + item.id)
			},
			toDetail(){
				this.$router.push('/scoreDetail')
			},
			exchange(item){
				let that = this
				Dialog.confirm({
					title:'温馨提示',
					message:"确定兑换此商品吗？"
				})
				.then(()=>{
					getIntegralOrder({
						token:localStorage.getItem('token'),
						goods_id:item.id
					}).then(res=>{
						if(res.code==1){
							that.$router.push('/mallSuccess')
						}else{
							that.$tip(res.msg)
						}
					})
				})
				.catch(()=>{
					
				})
			},
			goRecord(){
				this.$router.push('/mallRecord')
			},
		},
	}
</script>

<style lang="less">
	.jifen-mall{
		background-color: #f5f5f5;
		.mall-top{
			max-width: 750px;
			height: 3.9rem;
			background: url(../../assets/_integral_my_bg@2x.png) no-repeat center center;
			background-size: 100%;
			color: #FFFFFF;
			background-color: #FFFFFF;
			.p-1{
				font-size: .36rem;
			}
			.p-2{
				font-size: .9rem;
				margin-top: .3rem;
			}
			.seeDetail{
				width: 1.94rem;
				height: .6rem;
				border: .01rem solid #fff;
				border-radius: .3rem;
				line-height: .6rem;
				text-align: center;
				margin-top: .2rem;
				font-size: .28rem;
			}
		}
		.center{
			padding: .3rem 0;
			background-color: #fff;
			.center-l{
				border-right: .01rem solid #dddddd;
				img{
					width: .9rem;
					height: .9rem;
					margin-right: .1rem;
				}
			}
			.center-r{
				img{
					width: .9rem;
					height: .9rem;
					margin-right: .1rem;
				}
			}
		}
		.jifen{
			margin-top: 0.2rem;
			padding: 0.2rem;
			background-color: #FFFFFF;
			.jifen-in{
				margin: 0 auto;
				width: 2rem;
				height: 0.5rem;
			}
		}
		.goods_lists {
			margin-top: 0.2rem;
			padding: 0 0.28rem;
		
			.goods-list {
				width: calc((100% - 0.2rem) / 2);
				margin: 0 0.2rem 0.2rem 0;
				padding: 0.2rem 0.2rem 0.3rem;
				border-radius: 0.1rem;
				background-color: #fff;
		
				.goods-img {
					width: 2.9rem;
					height: 2.9rem;
					margin: 0 auto;
					border-radius: 0.1rem;
					border: 0.01rem solid #f5f5f5;
					overflow: hidden;
		
					.goods_img {
						margin: auto;
					}
				}
		
				.goods-info {
					margin-top: 0.2rem;
					font-size: 0.28rem;
					line-height: 100%;
					color: #333;
					.title {
						
					}
					.twoline{
						display: inline-block; 
						white-space: nowrap;
						overflow: hidden; 
						text-overflow:ellipsis;
					}
					.goods-btn{
						margin-top: 0.2rem;
						width:1.5rem;
						height:0.52rem;
						background:linear-gradient(-45deg,rgba(230,62,60,1) 0%,rgba(241,89,88,1) 100%);
						border-radius:0.26rem;
						span{
							color: #fff;
						}
					}
					.goods-fix {
						margin-top: 0.2rem;
						font-size: 0.34rem;
						color: #EE1C1A;
		
						.sales {
							width: 1.3rem;
							height: 0.4rem;
							font-size: 0.2rem;
							line-height: 0.4rem;
							color: #EE1C1A;
							border-radius: 0.1rem;
							background-color: #FFF6F6;
						}
		
						.price {
							span {
								font-size: 0.2rem;
								line-height: 120%;
								color: #666;
							}
						}
		
						img {
							width: 0.46rem;
							height: 0.46rem;
							margin: auto 0;
							border-radius: 100%;
						}
					}
				}
			}
		
			.goods-list:nth-child(2n) {
				margin-right: 0;
			}
		}
		.guize{
			min-height: 6rem;
			padding: 0.8rem 0.2rem 0.2rem 0.2rem;
			width: 6rem;
		}
	}
	
</style>
